<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			ul{list-style: none;}
			a{text-decoration: none; font-size: 16px; color: #666;}
			.image{width: 300px;margin: 20px auto;}	
			.list li{line-height: 40px;height: 40px;background-color: #efefef;text-indent: 1em;margin-bottom: 3px;overflow: hidden;-webkit-transition: height 0.3s ease;-moz-transition: height 0.3s ease;-o-transition: height 0.3s ease;transition: height 0.3s ease;}
			.list li img{width: 300px;height: 250px;}
			.list li:first-child{height: 290px;background-color: #FF3366;}
			.list li:first-child a{color: #fff;}
			.list:hover li{height: 40px;background-color: #efefef;}
			.list:hover li a{color: #666;}
			.list li:hover{height: 290px;background-color: #FF3366;}
			.list li:hover a{color: #fff;}
		</style>
	</head>
	<body>
		<div class="image">
			<ul class="list">
				<li>
					<a href="#">国际美妆抢先看</a>
					<img src="img/1.jpg"/>
				</li>
				<li>
					<a href="#">女神标准大讨论</a>
					<img src="img/2.jpg"/>
				</li>
				<li>
					<a href="#">吃货也能越吃越瘦</a>
					<img src="img/3.jpg"/>
				</li>
				<li>
					<a href="#">连衣裙抢头条</a>
					<img src="img/4.jpg"/>
				</li>
				<li>
					<a href="#">宫三女主美妆对决</a>
					<img src="img/5.jpg"/>
				</li>
			</ul>
		</div>
		
	</body>
</html>
